<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>封装_简易axios函数_获取省份列表</title>
</head>

<body>
  <p class="my-p"></p>
  <button class="reg-btn">注册用户</button>
  <script>
    /**
     * 目标：封装_简易axios函数_获取省份列表
     *  1. 定义myAxios函数，接收配置对象，返回Promise对象
     *  2. 发起XHR请求，默认请求方法为GET
     *  3. 调用成功/失败的处理程序
     *  4. 使用myAxios函数，获取省份列表展示
    */
    // 1. 定义myAxios函数，接收配置对象，返回Promise对象
    function myAxios(config) {
      return new Promise((resolve, reject) => {
        // 2. 发起XHR请求 默认是get
        const xhr = new XMLHttpRequest()

        // 判断 有 params 选项， 携带查询参数
        if (config.params) {
          // 使用URLSearchParmas转换 并携带到url上
          const paramsObj = new URLSearchParams(config.params)
          const queryString = paramsObj.toString()
          console.log(paramsObj)
          console.log(queryString)

          // 把查询数字字符串 拼接到url?后面
          config.url += `?${queryString}`
        }
        console.log(config.url)

        // open 设置请求的方法和地址，为发送请求做准备
        xhr.open(config.method || 'GET', config.url)
        //  loadend 是在 请求完成 （不管成功还是失败）时触发的事件，用来统一处理响应结果。
        xhr.addEventListener('loadend', () => {
          // 3. 调用成功 / 失败 \
          // xhr.response 是服务器响应的内容。
          if (xhr.status >= 200 && xhr.status < 300) resolve(JSON.parse(xhr.response))
          else reject(new Error(xhr.response))
        })

        // 判断是否有data选项 携带请求体
        if (config.data) {
          // 数据转换类型 在send中发送
          const jsonStr = JSON.stringify(config.data)
          // 请求体数据类型标记
          xhr.setRequestHeader('Content-Type', 'application/json')
          xhr.send(jsonStr)
        }
        // 正式发起请求，把配置好的 XHR 请求发送到服务器。
        else xhr.send()
      })
    }

    document.querySelector('.reg-btn').addEventListener('click', () => {
      // 4. 使用myAxios函数 获取省份列表
      myAxios({
        url: 'http://hmajax.itheima.net/api/register',
        method: 'POST',
        data: {
          username: 'wshhaaaaa12w~',
          password: '1234567'
        }
      }).then(result => {
        console.log(result)
      }).catch(error => {
        console.log(error)
      })
    })




  </script>
</body>

</html>